/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import { Form, Select, Input, Button } from "antd";
import { debounce } from "lodash";
import { connect } from "dva";
import Link from "umi/link";
import pageConfig from "./config";

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ loading, setter }, {sourceType}) => {
  const { actionTypes } = pageConfig(sourceType);
  return {
    setter,
    getYzList: loading.effects["setter/getYzList"],
    stationing: loading.effects["area/subList"],
    getSetterList: loading.effects[actionTypes.getSetterList],
  };
})
@Form.create()
export default class Search extends PureComponent {
  onSearch = debounce(
    e => {
      e.preventDefault();
      const { actionTypes } = this.pageConfig;
      const { dispatch, form } = this.props;
      form.validateFields((err, value) => {
        dispatch({
          type: actionTypes.getSetterList,
          payload: {
            page: 1,
            ...value,
          },
        });
      });
    },
    500,
    {
      leading: true,
      trailing: false,
    }
  );

  constructor(props) {
    super(props);
    const { sourceType } = props;
    this.pageConfig = pageConfig.call(this, sourceType);
    this.state = {
      site_id: "all",
    };
  }

  componentWillReceiveProps(nextProps) {
    const { form, getValues } = this.props;

    form.validateFields((err, value) => {
      if (getValues) {
        getValues(value);
      }
    });
  }

  getStationList = visible => {
    const { dispatch } = this.props;
    if (visible) {
      dispatch({
        type: "setter/getYzList",
      });
    }
  };

  onFilterOperator = (inputValue, options) => {
    const { children } = options.props;
    if (children.indexOf(inputValue) >= 0) return true;
  };

  selectCurrency = (e, labe) => {
    this.setState({
      cm_id: labe.key,
      site_id: labe.props.value,
    });
  };

  changeSelect = value => {
    if (!value) {
      this.setState({
        site_id: "all",
      });
    }
  };

  addOrderSource = () => {
    const { changeActiveKey } = this.props;
    changeActiveKey("sources", "add");
  };

  render() {
    const { site_id } = this.state;
    const { setter, form, isEmptyList } = this.props;
    const { getFieldDecorator } = form;
    const yzList = (setter && setter.yzList) || [];
    const {
      searchBarConfig: {
        site_id: { show },
        keyword: { name: keywordName, placeholder: keywordPlaceholder, width: keywordWidth },
        jumpToAddWs: { show: wsJumpShow },
      },
    } = this.pageConfig;
    return (
      <Form layout="inline">
        {show ? (
          <FormItem>
            {getFieldDecorator("site_id", {
              initialValue: site_id,
            })(
              <Select
                onDropdownVisibleChange={this.getStationList}
                filterOption={this.onFilterOperator}
                placeholder="选择站点"
                showSearch
                allowClear
                style={{ width: "150px" }}
                onSelect={this.selectCurrency}
                onChange={this.changeSelect}
              >
                <Option key="all" value="all">
                  全部站点
                </Option>
                {yzList.map(({ site_id, site_name }) => (
                  <Option key={`${site_id}`} value={site_id}>
                    {site_name}
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
        ) : null}
        <FormItem>
          {getFieldDecorator(keywordName, {
            initialValue: "",
          })(<Input placeholder={keywordPlaceholder} style={{ width: keywordWidth }} />)}
        </FormItem>
        <FormItem>
          <Button type="primary" icon="search" onClick={this.onSearch}>
            查询
          </Button>
        </FormItem>
        <FormItem>
          <Button type="primary" onClick={this.addOrderSource}>
            添加单号源
          </Button>
        </FormItem>
        {/* 微商Form中 */}
        {wsJumpShow &&
          isEmptyList && (
            <FormItem>
              <Button type="primary">
                <Link to="/system/business/client?type=derivative">添加微商客户</Link>
              </Button>
            </FormItem>
          )}
      </Form>
    );
  }
}
